import React from 'react';
import {NavLink} from 'react-router-dom';
import './index.scss';
import {connect} from 'react-redux';
import actions from '../../store/modules/user/actions';

class Login extends React.Component {
  render() {
    return (
      <div className='wrapper'>

        <div className='wrapper_top'>
          <div className="layout">
            <div className="layout_header">
              <em className="logo"></em>
              <h4 className="txt">账号登录</h4>
            </div>

            <div className="layout_login">
              <div className="login_input">
                <label htmlFor="username">
                  <input type="text" name="username" placeholder="用户名" ref='username'/>
                </label>
                <label htmlFor="password">
                  <input type="password" name="password" placeholder="密码" ref='password'/>
                </label>
              </div>

              <div className="login_btn">
                <button onClick={() => {this.props.handleLogin(this.refs.username,this.refs.password)}}>登录</button>
              </div>
            </div>

            <div className="layout_link">
              <ul>
                <li><NavLink to="/register">立即注册</NavLink>|</li>
                <li><NavLink to="/re">忘记密码</NavLink></li>
              </ul>
            </div>

            <fieldset className="oth_type_tit">
              <legend align="center">其他方式登录</legend>
            </fieldset>

            <div className="login_type">
              <NavLink to='/weibo'><i className="iconfont icon-weibo
" style={{color:'red'}}></i></NavLink>
              <NavLink to='/zhifubao'><i className="iconfont icon-tubiaoku-" style={{color:'skyblue'}}></i></NavLink>
              <NavLink to='/weixin'><i className="iconfont icon-weixin
" style={{color:'green'}}></i></NavLink>
            </div>

          </div>
        </div>

        <div className='wrapper_bottom'>
          <ul>
            <li><NavLink to="/login" activeClassName="current">简体</NavLink>|</li>
            <li><NavLink to="/diffcu" activeClassName="current">繁体</NavLink>|</li>
            <li><NavLink to="/english" activeClassName="current">English</NavLink>|</li>
            <li><NavLink to="/faq" activeClassName="current">常见问题</NavLink></li>
            <li><NavLink to="/pro" activeClassName="current">隐私政策</NavLink></li>
          </ul>
        </div>

      </div>
    );
  }
};

export default connect(
  null,
  (dispatch,props) => {
    return {
      handleLogin: (ele1,ele2) => {
        let payload = {
          name: ele1.value,
          password: ele2.value,
          props
        };
        dispatch(actions.LoginAct(payload));
      }
    }
  }
)(Login);
